<template>
  <div class="main_box" style="padding:10px">
    <div class="add_wrap">
      <el-form label-width="200px" v-if="dataInfo">
        <div class="tit">
          <h2>基础信息</h2>
          <el-button
            type="success"
            plain
            size="small"
            icon="fa fa-mail-forward"
            @click="returnList"
            >返回</el-button
          >
        </div>
        <el-row>
          <el-form-item label="报警时间:">
            <span>{{ dataInfo.createDate || '' }}</span>
          </el-form-item>
          <el-form-item label="设备类型:">
            <span>{{ EquipmentIsTypeList(dataInfo.equipType) }}</span>
          </el-form-item>
          <el-form-item label="报警方式:">
            <span>{{ EAlarmOrigin(dataInfo.taskOrigin) }}</span>
          </el-form-item>
          <el-form-item label="设备编号:">
            <span>{{ dataInfo.equipCode || '' }}</span>
          </el-form-item>
          <el-form-item label="报警类型:">
            <span>{{ EAlarmTypeList(dataInfo.alarmType) }}</span>
          </el-form-item>
          <el-form-item label="报警状态:">
            <el-tag v-if="dataInfo.alarmState === 2" size="mini" effect="dark" type="success">正常</el-tag>
            <el-tag v-if="dataInfo.alarmState === 1" size="mini" effect="dark" type="danger">报警</el-tag>
          </el-form-item>
          <el-form-item label="解除原因:">
            <el-tag v-if="dataInfo.cancelReason === 2" size="mini" effect="dark" type="success">
              已处理
            </el-tag>
            <el-tag v-if="dataInfo.cancelReason === 1" size="mini" effect="dark" type="danger">
              误触发
            </el-tag>
          </el-form-item>
          <el-form-item label="解除时间:">
            <span>{{ dataInfo.modifyDate || '-' }}</span>
          </el-form-item>
        </el-row>

        <div class="tit" style="margin: 10px 0 20px 0;">
          <h2>通知统计</h2>
        </div>
        <el-row style="padding-top: 0;">
          <el-table
              :data="statisticsList"
              border
              :fit="true"
              highlight-current-row
              v-loading="loadingStatistically"
              element-loading-text="数据加载中，请稍后..."
              empty-text="对不起，没有找到相关数据"
          >
            <el-table-column
                prop="sumHouse"
                label="通知总户数"
                align="center"
                width="auto"
            >
            </el-table-column>
            <el-table-column
                prop="successHouse"
                label="成功户数"
                align="center"
                width="auto"
            >
            </el-table-column>
            <el-table-column
                prop="notifyPhone"
                label="电话通知总人数"
                align="center"
                width="auto"
            >
            </el-table-column>
            <el-table-column
                prop="connectedPhone"
                label="电话已接通人数"
                align="center"
                width="auto"
            >
            </el-table-column>
          </el-table>
        </el-row>

        <div class="tit">
          <h2>通知明细</h2>
          <el-button type="success" plain size="small" icon="el-icon-refresh-right" @click="refresh">刷新</el-button>
        </div>
        <el-row>
          <el-table
            :data="taskRecordList"
            border
            :fit="true"
            highlight-current-row
            v-loading="loading"
            element-loading-text="数据加载中，请稍后..."
            empty-text="对不起，没有找到相关数据"
          >
            <el-table-column
              prop="createDate"
              label="通知时间"
              align="center"
              width="100px"
            >
            </el-table-column>
            <el-table-column label="通知类型" align="center" width="100px">
              <template slot-scope="scope">
                {{ scope.row.notifyType | typeFilters }}
              </template>
            </el-table-column>
            <el-table-column
              prop="address"
              label="详细地址"
              align="center"
              width="100px"
            >
            </el-table-column>
            <el-table-column prop="phones" label="手机号" align="center">
              <template slot-scope="scope">
                <div v-for="(item, index) in scope.row.phones" :key="index">
                  <span v-if="item.show">{{ item.full }}</span>
                  <span v-else>{{ item.hidden }}</span>
                  <i
                      :class="item.show?'el-icon-minus':'el-icon-view'"
                      @click="showFullPhone(item)"
                      style="font-size: 16px;"
                  ></i>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="againCount"
              label="再次通知次数"
              align="center"
              width="100px"
            >
            </el-table-column>
            <el-table-column
              prop="handleUserName"
              label="线下通知人"
              align="center"
              width="100px"
            >
            </el-table-column>
            <el-table-column
              prop="handleDate"
              label="线下通知时间"
              align="center"
              width="100px"
            >
            </el-table-column>
            <el-table-column label="通知状态" align="center" width="auto">
              <template slot-scope="scope">
                {{ scope.row.notifyState | statusFilters }}
              </template>
            </el-table-column>
            <el-table-column label="操作" width="auto" align="center">
              <template slot-scope="scope">
                <el-row>
                  <el-button
                    v-if="scope.row.notifyState === 9"
                    size="mini"
                    @click="operateClick(scope.row, 1)"
                    >我已通知</el-button
                  >

                  <!-- 报告单操作 -->
                </el-row>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.pageNo"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="page.pageSize"
            layout="total, sizes, jumper, next, pager, prev"
            :total="page.total"
          ></el-pagination>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import MessageApi from "@/api/message/message";
import {EAlarmOrigin, EAlarmTypeList, EquipmentIsTypeList} from "@/enum";
import noticeApi from "@/api/message/notice";
export default {
  data() {
    return {
      dataInfo: {},
      taskId: this.$route.query.taskId,
      page: {
        pageNo: 1,
        pageSize: 20,
        total: 0,
      },
      loading: false,
      loadingStatistically: false,
      taskRecordList: [],
      statisticsList:[],
    };
  },
  computed: {},
  mounted() {
    this.getData();
    this.getMxList();
    this.getStatisticsList()
  },
  methods: {
    showFullPhone(e) {
      e.show = ! e.show
    },
    getData() {
      this.$emit("show-loading", true);
      MessageApi
        .notifyTaskDetail({ taskId: this.taskId })
        .then((res) => {
          this.dataInfo = res.data.object ?{... res.data.object, taskOrigin: res.data.taskOrigin} : {};
          this.$emit("show-loading", false);
        })
        .catch((error) => {
          this.$emit("show-loading", false);
        });
    },
    getMxList() {
      this.loading = true;
      noticeApi
        .notifyMx({
          taskId: this.taskId,
          pageNo: this.page.pageNo,
          pageSize: this.page.pageSize,
        })
        .then((res) => {
          this.loading = false;
          this.taskRecordList = res.data.list;
          for (let i in this.taskRecordList) {
            if (this.taskRecordList[i].phones.includes(",")) {
              this.taskRecordList[i].phones = this.taskRecordList[i].phones
                .split(",")
                .map((phone) => {
                  let hiddenPhone = phone.replace(
                    /(\d{3})\d{4}(\d{4})/,
                    "$1****$2"
                  );
                  return { full: phone, hidden: hiddenPhone,show:false };
                });
            } else {
              let hiddenPhone = this.taskRecordList[i].phones.replace(
                /(\d{3})\d{4}(\d{4})/,
                "$1****$2"
              );
              this.taskRecordList[i].phones = [
                { full: this.taskRecordList[i].phones, hidden: hiddenPhone,show:false },
              ];
            }
          }
          this.page.total = res.data.total;
        })
        .catch((error) => {});
    },
    getStatisticsList(){
      this.loadingStatistically = true
      MessageApi.notifyTaskNotifyCount({ taskId: this.taskId }).then((res) => {
        this.statisticsList = [res.data]
        this.loadingStatistically = false
      }).catch(() => {
        this.loadingStatistically = false
      });
    },
    refresh() {
      this.getMxList();
      this.getStatisticsList();
    },
    returnList() {
      this.$store.dispatch("delView", this.$route);
      this.$router.back();
    },
    handleSizeChange(size) {
      this.page.pageSize = size;
      this.getMxList();
    },
    handleCurrentChange(val) {
      this.page.pageNo = val;
      this.getMxList();
    },
    EAlarmTypeList(alarmType) {
      return alarmType ? EAlarmTypeList.find(c => c.value === alarmType).label : ''
    },
    EquipmentIsTypeList(equipType) {
      return equipType ? EquipmentIsTypeList.find(c => c.id === equipType).name : ''
    },
    EAlarmOrigin(taskOrigin) {
      return taskOrigin ? EAlarmOrigin.find(c => c.value === taskOrigin).label : ''
    },

  },
  filters: {
    typeFilters(val) {
      switch (val) {
        case 1:
          val = "自己";
          break;
        case 2:
          val = "邻里";
          break;
      }
      return val;
    },
    statusFilters(val) {
      switch (val) {
        case -1:
          val = "通知失败";
          break;
        case 1:
          val = "通知中";
          break;
        case 5:
          val = "部分通知";
          break;
        case 10:
          val = "通知成功";
          break;
      }
      return val;
    },
    operateClick(e) {
      this.$confirm("是否确认已通知?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          noticeApi
            .offlineNotice({ taskRecordId: e.taskRecordId })
            .then((res) => {
              if (res.data.status === 0) {
                this.$Utils.notifySuccess();
                this.getMxList();
              }
            })
            .catch((error) => {});
        })
        .catch(() => {});
    },
  },
};
</script>
<style lang="scss">
@import "@/assets/css/views/add.scss";
@import "@/assets/css/views/content.scss";
</style>
